<template>
  <view>
    <view style="width: 56rpx; height: 56rpx" @click="backToHome" class="back-btn ml-14 mt-12 flex font-color align-center">
      <image class="full-height full-width" src="@/static/common/back.png"></image>
      <text>{{videoText}}</text>
    </view>
    <video :src="videoUrl" style="height: 100vh; width: 100vw" autoplay></video>

    <view style="bottom: 10rem" @click="showHistory" class="back-btn ml-14 mt-12 flex-col font-color align-center operation-btn">
      <image class="full-height full-width" src="@/static/common/i-history.png"></image>
      <view>history</view>
    </view>

    <view @click="showAnthology" class="back-btn ml-14 mt-12 flex font-color align-center operation-btn flex-col">
      <image class="full-height full-width" src="@/static/common/i-authology.png"></image>
      <view style="width: 5rem">authology</view>
    </view>

    <u-popup
             :show="isShowHistory"
             mode="bottom"
             @open="openHistory"
             @close="
        () => {
          isShowHistory = false;
          tabIndex = 0;
        }
      "
             :round="10">
      <view class="font-color pop-contain">
        <view>View history</view>
      </view>
    </u-popup>

    <u-popup
             :show="isShowAuth"
             mode="bottom"
             @open="openAuth"
             @close="
        () => {
          isShowAuth = false;
          tabIndex = 0;
        }
      "
             :round="10">
      <view class="pop-contain">
        <u-tabs
                :list="[{ name: 'anthology(60 episode)' }, { name: 'Synopsis' }]"
                @change="selectDetail"
                itemStyle="padding-left: 15px; padding-right: 15px; height: 30px;"
                class="mb-14"
                :activeStyle="{
            color: ' #ffffff',
            fontWeight: 'bold',
            transform: 'scale(1.05)'
          }"></u-tabs>
        <view class="videoContain" v-if="tabIndex === 0">
          <view class="flex-col items-start group_2 equal-division-item full-width font-color" v-for="(item, index) in vedioList">
            <view class="episode_image" :style="{ 'background-image': 'url(' + item.image + ')' }" @click="skipToVedio(index+1, item.url)" v-if="!item.isLocked"></view>
            <view
                  class="episode_image flex-col justify-center items-center"
                  :style="{ 'background-image': 'url(' + item.image + ')', opacity: 0.5 }"
                  v-if="item.isLocked">
              <u-icon name="lock" size="28" color="#ffffff"></u-icon>
              <text class="font-color">lock</text>
            </view>
            <text class="font_3 mt-13">Episode {{ index + 1 }}</text>
          </view>
        </view>

        <view class="font-color flex-col items-start" v-if="tabIndex === 1">
          <view class="flex gap-1 ml-16">
            <image src="https://ide.code.fun/api/image?token=678afb174ae84d001224126b&name=e2df9bb796f86406316f2f3d891ead0c.png" style="width: 4rem; height: 6rem"></image>
            <view class="flex flex-col gap-1">
              <text>XXXXXXXX</text>
              <text class="video_label">UUUU</text>
            </view>
          </view>
          <view class="ml-16 mt-16">XXXXXXXXXXXXXXXXXXXXXXXXXX</view>
        </view>
      </view>
    </u-popup>
  </view>
</template>
history

<script>
import AppVideo from '@/components/AppVideo.vue';
import { getPlayletInfoAPI } from '@/service/index.js'
export default {
  components: {
    AppVideo
  },
  onLoad(options) {
    this.playleyId = options.playletId;
    this.getPlayletInfo(options.playletId, options.num)
  },
  data() {
    return {
      isShowHistory: false,
      isShowAuth: false,
      vedioList: [],
      tabIndex: 0,
      videoText: '1#',
      videoUrl: '',
      playletId: ''
    };
  },
  methods: {
    openHistory() {},
    openAuth() {},
    backToHome() {
      uni.switchTab({
        url: '/pages/home/index'
      });
    },
    async getPlayletInfo(playletId, playNum) {
      const res = await getPlayletInfoAPI({ "playletId": playletId });
      this.vedioList = res.data.officialVideos;
      let index = 1;
           debugger
      this.vedioList.forEach(item => {
        item.image = "https://miniflix.tos-accelerate.volces.com/res/" + item.numCover;
        item.text = item.title;
        item.des = '共' + item.num + '集'
        if (!item.url) {
          item.isLocked = true
        }
        if (playNum == index++) {
          this.videoUrl = "https://miniflix.tos-accelerate.volces.com/res/" + item.url
        }
      })

      this.videoText = playNum + "#"
      this.playletId = playletId
    },
    showHistory() {
      this.isShowHistory = !this.isShowHistory;
    },
    showAnthology() {
      this.isShowAuth = !this.isShowAuth;
    },
    selectDetail(e) {
      this.tabIndex = e.index;
    },
    skipToVedio(playNum, url) {
      console.log(playNum, url)
      this.videoText = playNum + "#"
      this.videoUrl = "https://miniflix.tos-accelerate.volces.com/res/" + url;
      this.isShowAuth = false
    }
  }
};
</script>

<style scoped lang="scss">
.back-btn {
  position: absolute;
  z-index: 999;
}

.pop-contain {
  padding: 15rpx;
  height: 60vh;
  overflow-y: auto;
  background-color: #140c2b
}

.font-color {
  color: #ffffff;
}

.video_label {
  padding: 0.5rem;
}

.videoContain {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: 0.5rem;

  .episode_image {
    width: 100%;
    height: 6rem;
    background-size: cover;
  }
}

/deep/ .u-tabs__wrapper__nav__line {
  // position: absolute;
  // bottom: 1rpx;
  // border-radius: 200rpx;
  // background-image: linear-gradient(68.5deg, #0dfcd2 1.7%, #0dfcd200 98.3%);
  // border-radius: 0.75rem;
  // width: 2.75rem;
  // height: 0.25rem;
  display: none;
}

.operation-btn {
  width: 2.5rem;
  height: 2.5rem;
  position: absolute;
  z-index: 999;
  bottom: 5rem;
  right: 1.7rem;
}
</style>